<template>
  <div class="class">
    <!--    navbar-->
    <div class="navbar-div">
      <van-nav-bar fixed title="全部分類" />
    </div>

    <!--    搜索-->

    <div class="search-div">
      <div class="fake-top">
        <p>&nbsp;</p>
      </div>
      <router-link class="link" to="/search">
        <div class="fake-search">
          <van-icon name="search" />
          搜索商品
        </div>
      </router-link>
    </div>

    <!--    側邊欄-->
    <div class="sidebar-div">
      <div class="sidebar-left">
        <van-sidebar v-model="activeKey" @change="onChange(item.parent_id)">
          <van-sidebar-item
            v-for="(item, index) in categoryList"
            :key="index"
            :title="item.name"
            @click="backIndex(index)"
          />
        </van-sidebar>
      </div>
      <div class="sidebar-right">
        <div
          v-for="(item, index) in categorChildrenyList"
          :key="index"
          class="img-text"
          @click="$router.push(`/searchList?search=${item.name}`)"
        >
          <img
            :src="item.image.external_url"
            alt=""
            height="60px"
            width="60px"
          />
          {{ item.name }}
        </div>
      </div>
    </div>
    <!--  底部空白臺高視窗-->
    <div class="last">
      <p></p>
    </div>
  </div>
</template>
<script>
import { getCategory } from "@/api/index-class";

export default {
  name: "indexClass",
  components: {},
  data() {
    return {
      activeKey: 0,
      categoryList: [],
      categorChildrenyList: [],
    };
  },
  computed: {},
  methods: {
    async getCategory() {
      const {
        data: { data },
      } = await getCategory();
      this.categorChildrenyList = data.list[0].children;
      this.categoryList = data.list;
    },
    onChange(id) {},
    async backIndex(index) {
      const {
        data: { data },
      } = await getCategory();
      this.categorChildrenyList = data.list[index].children;
    },
  },
  created() {
    this.getCategory();
  },
};
</script>
<style lang="less">
.class {
  .navbar-div {
    .van-nav-bar__title {
      font-weight: bolder;
    }

    .van-nav-bar {
      z-index: 2;
    }
  }

  .search-div {
    z-index: 1;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 50px 0 0;

    .fake-top {
      background: transparent;
      height: 50px;
    }

    .link {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .fake-search {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 95%;
        border-radius: 14px;
        background-color: #f7f7f7;
        height: 32px;
        color: #6d6d83;
      }
    }
  }

  .sidebar-div {
    display: flex;
    position: sticky;
    top: 0;

    .sidebar-left {
      position: sticky;
      padding-top: 100px;
      margin-bottom: 50px;
    }

    .sidebar-right {
      padding-top: 100px;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      position: sticky;
      top: 0;
      height: 10vh;

      .img-text {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
      }
    }
  }

  .last {
    height: 50px;
  }
}
</style>
